<template>
    <view>
			<!-- 头部轮播 -->
			<swiper autoplay="true" indicator-dots="true" circular="true" style="height: 1000upx;width: 100%;">
				<swiper-item v-for="(img,key) in res.images" :key="key">
					<image :src="img" style="width: 100%;height: 1000upx;" mode=""/>
				</swiper-item>
			</swiper>
			
		  <view style="height: 80upx;background-color: #fff;line-height: 80upx;display: flex;">
		  	<image style="height: 60upx;width: 60upx;margin: 10upx 30upx 10upx 20upx;border-radius: 30upx;" :src="res.real_head_img" mode=""></image>
				<text style="">{{res.user_name}}</text>
		  </view>
			
		  <view style="background-color: #fff;line-height: 50upx;margin: 5upx 0upx 10upx;padding: 0upx 20upx;min-height: 300upx;">
				<view style="text-align: center;">
					<text style="font-size: 36upx;font-weight: 555;">{{res.title}}</text>
				</view>
				<view>
					<text style="font-size: 24upx;color: #333333;font-weight: 520;">{{res.content}}</text>
				</view>
		  </view>
			<!-- 相关商品 -->
		  <view style="height: 420upx;background-color: #fff;line-height: 50upx;margin: 10upx 0upx 10upx;padding: 0upx 50upx;overflow: hidden;" v-if="res.goodsInfo">
				<view style="margin-top: 10upx;">
					<text style="color: #888888;">相关商品</text>
				</view>
				<view style="margin: 30upx 0upx;" @click="jumptogoods(goodsInfo.id)">
					<view style="display: inline-block;width: 200upx;border-radius: 10upx;">
						<image style="width: 200upx;height: 200upx;border-radius: 10upx;" :src="goodsInfo.goods_thumb_image" mode=""></image>
						<view style="text-align: center;">
							<text style="font-weight: bold;">{{goodsInfo.goods_short}}</text>
							<view>￥{{goodsInfo.cost_price}}</view>
						</view>
					</view>
				</view>	
		  </view>
			
			
			<!-- 底部固定栏 -->
		  <view style="height: 100upx;background-color: #fff;line-height: 100upx;padding: 25upx 20upx;border-top: 1upx solid #eeeeee;display: flex;justify-content: space-around;position: fixed;bottom: 0;left: 0;width: 100%;">
				<view style="display: flex;border: 1upx solid #EEEEEE;padding: 3upx 20upx 0;border-radius: 30upx;background-color: #EEEEEE;" @click="toggleMask1('show')">
					<image style="width: 40upx;height: 40upx;margin-right: 10upx;" src="../../../../static/pinglun.png" mode=""></image>
					<view>
						<text style="color: #aaaaaa;">~~我也来神评~~</text>
					</view>
				</view>
				
				<view style="display: flex;">
					<image style="width: 40upx;height: 40upx;margin-right: 10upx;" src="../../../../static/dianzan.png" mode="" v-if="!dianzan" @click="yes_no"></image>
					<image style="width: 40upx;height: 40upx;margin-right: 10upx;" src="../../../../static/dianzan1.png" mode="" v-if="dianzan" @click="yes_no"></image>
					<view>
						<text>点赞</text>
					</view>
				</view>
			
				<button style="
					margin: 0;padding: 0;border: 1px solid #fff;outline: none;background-color: #fff;
					display: flex;"
					open-type="share"
					>
					<image style="width: 40upx;height: 40upx;margin-right: 10upx;" src="../../../../static/fenxiang.png" mode=""></image>
					<view>
						<text>分享</text>
					</view>
				</button>
				<!-- @click="toggleMask('show')" -->
				<!-- <view style="display: flex;" @click="to_comment">
					<image style="width: 40upx;height: 40upx;margin-right: 10upx;" src="../../../../static/xiaoxi.png" mode=""></image>
					<view>
						<text>评论</text>
					</view>
				</view> -->
		  </view>
			
			<!-- <view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask"> -->
				<view class="mask-content">
					<!-- 如果评论列表为空 -->
					<view v-if="list=='' || list==undefined || list == null" style="width: 100%;height: 300upx;background-color: #fff;margin-bottom: 130upx;">
						<view style="padding-top: 20upx;margin-left: 50upx;">
							<text style="color: #888888;">相关评论</text>
						</view>
						<view style="width: 500upx;height: 100upx;text-align: center;font-size: 36upx;color: #666666;border: 1upx solid #999999;padding:20upx 40upx;margin-left: 125upx;margin-top: 60upx;">
							暂无评论~抢沙发!
						</view>
					</view>
					<!-- 评论 -->
					<view v-if="list.length !=0 " style="min-height: 200upx;background-color: #fff;line-height: 50upx;margin: 5upx 0upx 30upx;padding: 0upx 50upx;overflow: hidden;" @touchmove.prevent="">
						<view style="margin-top: 20upx;">
							<text style="color: #888888;">相关评论</text>
						</view>
						<view style="width: 100%;margin: 10upx 0;" v-for="(item,key) in list" :key="key">
							<view style="color: #000;display: flex;">
								<image :src="item.real_head_img" mode="" style="width: 60upx;height: 60upx;display: inline-block;border-radius: 40upx;vertical-align: middle;"></image>
								<text style="flex: 5;padding-left: 14upx;font-weight: 666;">{{item.user_name}}</text>
								<text class="del-btn yticon icon-fork" @click="deleteCartItem(item.id)" style="flex: 1;text-align: right;" v-if="user_id == item.uid"></text>
							</view>
							<view style="color: #000;margin: 10upx 0upx 10upx 47upx;">
								<text style="margin-left: 20upx;">{{item.content}}</text>
							</view>
							<view style="color: #000;">
								<text style="margin-left: 58upx;color: #ccc;font-size: 24upx;">{{item.create_time}}</text>
							</view>
						</view>
						<view @click="to_comment" style="width: 500upx;text-align: center;font-size: 36upx;color: #666666;border: 1upx solid #999999;padding:20upx 40upx;margin-left: 75upx;margin-top: 90upx;margin-bottom: 150upx;">
							查看更多评论
						</view>
					</view>
				</view>
			<!-- </view> -->
			
			<view class="mask" :class="maskState1===0 ? 'none' : maskState1===1 ? 'show' : ''" @click="toggleMask1">
				<view class="mask-content" @click.stop.prevent="stop_prevent">
					<view style="width: 100%;min-height: 200upx;background-color: #fff;margin-top: 10upx;padding-top: 20upx;" >
						<textarea v-model="content" placeholder="欢迎你的精彩评论" style="margin: 0 35upx;width: 680upx;" />
					</view>
					<view style="background-color: #FFFFFF;text-align: right;">
						<button type="primary" style="width: 200upx;display: inline-block;height: 70upx;line-height: 70upx;color: #fff;background-color: #000000;margin: 0 30upx;" @click="add_comment">添加评论</button>
					</view>
				</view>
			</view>
			<!-- <uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more> -->
    </view> 
</template>

<script>
	// import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		onShareAppMessage: function(res) {
		  var that = this;
		  if (res.from === 'button') {
		    //console.log('来自页面内转发按钮');
		  } else if (res.from === 'menu'){
		    //console.log('右上角菜单转发按钮');
		  }
		},
		onShareTimeline: function(res) {
			return {
				title: '生物伞',
				
			}
		},
		components: {
			// uniLoadMore
		},
	    data() {
				return {
					res:{},
					article_id:'',
					user_id:'',
					background: ['color1', 'color2', 'color3'],
					indicatorDots: true,
					autoplay: true,
					interval: 2000,
					duration: 500,
					dianzan: false,
					goodsInfo: '',
					select_userid: '',
					uid:'',
					content:'',
					list:[],
					maskState: 1, //评论面板显示状态
					maskState1: 0,
					
					loadingText: '加载中...',
					loadingType: 0,
					contentText: {
						contentdown: '上拉显示更多',
						contentrefresh: '正在加载...',
						contentnomore: '没有更多数据了'
					},
					page: 1,
					timer:{},
				}
	   },
		onLoad:function(e){
			this.article_id = e.articleid
			uni.showLoading()
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
					this.user_id = res.data
					this.setAjax()
					this.setajax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../../../pages/login/login'
					});
				}
			});
		},
		// 下拉加载
		onPullDownRefresh() {
			this.page = 1
			this.loadingType = 0;//将loadingType归0重置
			let o = this
			setTimeout(function () {
				o.setAjax();
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 上拉加载
		// onReachBottom(){
		// 	if (this.timer != null) {
		// 		clearTimeout(this.timer)
		// 	}
		// 	this.timer = setTimeout(()=> {
		// 		this.getmorenews()
		// 	}, 1000);
		// },
	  methods: {
			setAjax(){
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaper/paperDetail',
					method: 'POST',
					data:{
						id: this.article_id,
						user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if(res.data.code == 998){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}
						uni.hideLoading()
						console.log(res)
						let list = res.data.data.list[0]
						for(let i=0; i < list.images.length; i++) {
							list.images[i] = 'https://cx.mingmeijt.com' + list.images[i]
						}
						this.res = list
						this.goodsInfo = res.data.data.list[0].goodsInfo
						this.goodsInfo.goods_thumb_image = 'https://cx.mingmeijt.com' + this.goodsInfo.goods_thumb_image
						
						this.uid = res.data.data.list[0].uid
						console.log(this.res)
						// 判断点赞选中状态
						if (res.data.data.list[0].is_like == 2) {
							this.dianzan = true
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			setajax(){
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaperComment/index?p=1',
					method: 'POST',
					data:{
						paper_id: this.article_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						console.log(res)
						this.list = res.data.data.list
					},
					fail: () => {},
					complete: () => {}
				});
			},
			to_comment () {
				uni.navigateTo({
					url: './comment?articleid=' + this.article_id
				})
			},
			add_comment () {
				let o = this
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaperComment/addPaperComment',
					method: 'POST',
					data:{
						user_id: this.user_id,
						paper_id: this.article_id,
						content: this.content,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						uni.showToast({
							title:res.data.msg,
							icon:"none"
						})
						if (res.data.code == 200) {
							this.content = ''
							setTimeout(function() {
								o.toggleMask1()
								o.setajax()
							}, 1000);
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			deleteCartItem(id) {
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaperComment/deletePaperComment',
					method: 'POST',
					data:{
						user_id: this.user_id,
						paper_id: this.article_id,
						id: id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						uni.showToast({
							title:res.data.msg,
							icon:"none"
						})
						if (res.data.code == 200) {
							this.setajax()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			jumptogoods(id) {
				uni.setStorage({
					key: 'select_user_id',
					data: this.uid
				});
				uni.navigateTo({
					url: '../../../../pages/product/product?select_userid=' + this.uid + '&goodsid=' + id
				})
			},
			yes_no() {
				if (this.dianzan == false) {
					this.like()
					return
				}
				if (this.dianzan == true) {
					this.nolike()
					return
				}
			},
			like() {
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaper/clickLike',
					method: 'POST',
					data:{
						paper_id: this.article_id,
						user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if(res.data.code == 200) {
							// 设为点赞状态
							this.dianzan = true
							this.setAjax()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			nolike() {
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaper/cancelLike',
					method: 'POST',
					data:{
						paper_id: this.article_id,
						user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if(res.data.code == 200) {
							// 设为非点赞状态
							this.dianzan = false
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			toggleMask1(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState1 = 2;
				setTimeout(()=>{
					this.maskState1 = state;
				}, timer)
			},
			toggleMask(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(()=>{
					this.maskState = state;
				}, timer)
				
				// 评论列表
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaperComment/index',
					method: 'POST',
					data:{
						paper_id: this.article_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						console.log(res)
						this.list = res.data.data.list
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getmorenews() {
				let o = this
				this.page++;//每触底一次 page +1
				console.log(this.page)
				if (this.loadingType !== 0) {//loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading();//显示加载动画
				uni.request({
					url:'https://cx.mingmeijt.com/Api/LabelPaperComment/index?p=' + this.page,
					method: 'POST',
					data: {
						paper_id: this.article_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: function(res) {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if (res.data.data.list == '' || res.data.data.list == null) {//没有数据
							o.loadingType = 2;
							uni.hideNavigationBarLoading();//关闭加载动画
							return;
						}
						var tpcList = res.data.data.list
						o.list = o.list.concat(tpcList);//将数据拼接在一起
						o.loadingType = 0;//将loadingType归0重置
						uni.hideNavigationBarLoading();//关闭加载动画
					}
				});
			},
			stop_prevent () {
				return
			},
			changeIndicatorDots(e) {
					this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
					this.autoplay = !this.autoplay
			},
			intervalChange(e) {
					this.interval = e.target.value
			},
			durationChange(e) {
					this.duration = e.target.value
			}
		}
	}
</script>

<style lang="scss">
	button::after {
	  border: none;
	}
	/* 评论面板 */
	.mask{
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 9995;
		transition: .3s;
		
		.mask-content{
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y:scroll;
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			
			.mask-content{
				transform: translateY(0);
			}
		}
	}

</style>
